<!-- 管理员:课程考核管理:题库和在线考试管理:试题库管理:选择章节对话框 -->
<template>
  <div id="id_chapter_choice_dialog_canvas">
    <el-dialog :title="chapterDialog.dialogTitle"
               :visible.sync="chapterDialog.dialogVisible"
               :close-on-click-modal=false
               :show-close=false
               :center=true
               :close-on-press-escape=false
               custom-class="choiceChapterDialog"
               append-to-body>
      <el-row style="margin:10px 0px;">
        <el-button @click="onBtnCreateLevelOneClickHandler"
                   plain
                   type="danger"
                   icon="el-icon-circle-plus-outline"
                   size="mini"
                   style="font-size:14px;font-weight:bold;height:35px;">新增章节</el-button>
      </el-row>
      <el-row>
        <el-card>
          <el-tree :data="treeData"
                   node-key="id"
                   indent="22"
                   :props="treeprops"
                   :expand-on-click-node="false"
                   :render-content="renderContent"
                   @node-click="onTreeNodeClickHandler"
                   @current-change="onTreeCurrentChangeHandler"></el-tree>
        </el-card>
      </el-row>
      <div slot="footer">
        <el-button type="warning"
                   @click="onBtnOkClickHandler">保存</el-button>
        <span style="display:inline-block;width:60px;"></span>
        <el-button type="danger"
                   @click="onBtnCancelClickHandler">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Setreesave } from '@/api/examinations/gitlist'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    treeData: [],
  },
  data() {
    return {
      ClkData: '',
      treeprops: {
        children: 'children',
        label: 'zjmc',
      },
      chapterDialog: {
        dialogTitle: '选择章节',
        dialogVisible: false,
      },
      id: 1000,
      //   treeData: tmp_tree_data,
      selectNode: null,
    }
  },
  methods: {
    onTreeNodeClickHandler: function (simpleVal, fullVal) {
      this.$emit('clickdata', simpleVal)
      this.selectNode = fullVal
    },
    onTreeCurrentChangeHandler: function (simpleVal, fullVal, treeObj) {
      this.selectNode = fullVal
    },
    onBtnCreateLevelOneClickHandler: function () {
      this.$prompt('请输入新章节名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的章节名称是: ' + value,
        })
        const newChild = { zjmc: value, children: [] }
        this.treeData.push(newChild)
      })
    },
    onBtnOkClickHandler: function () {
      this.chapterDialog.dialogVisible = false
      this.$emit('save', this.selectNode)
      this.$emit('sshow', false)
    },
    onBtnCancelClickHandler: function () {
      this.chapterDialog.dialogVisible = false
      this.$emit('sshow', false)
      this.$emit('cancel')
    },
    append: function (data) {
      this.$prompt('请输入新章节名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的章节名称是: ' + value,
        })
        const newChild = { id: this.id++, zjmc: value, children: [] }
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        console.log(
          {
            parentid: data.id,
            jb: data.jb - 0 + 1 + '',
            zjmc: value,
          },
          data
        )
        Setreesave({ parentid: data.id, dj: data.jd - 0 + 1 + '' }).then(
          (res) => {
            console.log(res)
          }
        )
        data.children.push(newChild)
      })
    },
    remove: function (node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex((d) => d.id === data.id)
      children.splice(index, 1)
    },
    renderContent: function (h, { node, data, store }) {
      //   console.log('h')
      //   console.log(h)
      //   console.log('node')
      //   console.log(node)
      //   console.log('data')
      //   console.log(data)
      return (
        <span class="chapter-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              style="width:29px;"
              plain
              type="success"
              icon="el-icon-circle-plus-outline"
              circle
              on-click={() => this.append(data)}
            ></el-button>
            <el-button
              size="mini"
              style="width:29px;"
              plain
              type="danger"
              icon="el-icon-delete"
              circle
              on-click={() => this.remove(node, data)}
            ></el-button>
          </span>
        </span>
      )
    },
  },
  watch: {
    dialogVisible: {
      handler: function (p_val, p_oldval) {
        console.log('选择章节对话框:watch:dialogVisible=' + p_val)
        this.chapterDialog.dialogVisible = p_val
      },
      deep: true,
    },
  },
  mounted: function () {
    console.log(
      '选择章节对话框:mounted:dialogVisible=' +
        this.dialogVisible +
        ', chapterDialog.dialogVisible=' +
        this.chapterDialog.dialogVisible
    )
  },
}
</script>

<style lang="less" scoped>
.chapter-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding-right: 8px;
  margin: 5px 0px;
}
.el-tree-node__content {
  height: 35px;
  line-height: 35px;
}
</style>

<style lang="less" scoped>
.el-card {
  height: 350px;
  overflow: auto;
}
</style>
